<script setup lang="ts">
	import { useCorps } from "./utils/hook";
	import Refresh from "@iconify-icons/ep/refresh";
	import AddFill from "@iconify-icons/ri/add-circle-line";
	import { PureTableBar } from "@/components/RePureTableBar";
	import { useRenderIcon } from "@/components/ReIcon/src/hooks";
	import { ref } from "vue";
	import { message } from "@/utils/message";
	import type { UploadProps } from 'element-plus'
	import { Plus } from '@element-plus/icons-vue'
	import { getToken, formatToken } from "@/utils/auth";
	const {
		form,
		loading,
		columns,
		dataList,
		pagination,
		isShow,
		onSearch,
		resetForm,
		openDialog,
		handleSizeChange,
		handleCurrentChange,
		deviceDetection,
		handleDelete
	} = useCorps();
	const formRef = ref();
	import { baseUrlApi } from "@/api/utils";
	const fileList = ref([]);
	const uploadActionUrl = ref(baseUrlApi+'/uploadFile/upload')
	/** 上传文件前校验 */
	const onBefore = file => {
	  if (!["image/jpeg", "image/png", "image/gif"].includes(file.type)) {
	    message("只能上传图片");
	    return false;
	  }
	  const isExceed = file.size / 1024 / 1024 > 2;
	  if (isExceed) {
	    message(`单个图片大小不能超过2MB`);
	    return false;
	  }
	};
	/** 超出最大上传数时触发 */
	const onExceed = () => {
	  message("最多上传1张图片，请先删除在上传");
	};
	const uploadInfo = ref([])
	const handleUploadSuccess: UploadProps['onSuccess'] = (
	  response,
	  uploadFile
	) => {
		console.log(response.result, '888888888888')
	  uploadInfo.value = response.result
	}
	const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
	  console.log(uploadFile, uploadFiles)
	  fileList.value = []
	}
</script>

<template>
	<div class="main">
		<!-- <el-form ref="formRef" :inline="true" :model="form"
			class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
			<el-form-item label="关键词:">
				<el-input v-model="form.keyword" class="!w-[180px]" clearable placeholder="请输入关键词" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" :icon="useRenderIcon('ri:search-line')" :loading="loading" @click="onSearch">
					搜索
				</el-button>
				<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
					重置
				</el-button>
			</el-form-item>
		</el-form> -->
		<el-upload
		    v-model:file-list="fileList"
		    :action="uploadActionUrl"
			:headers="{ Authorization: formatToken(getToken().accessToken) }"
		    list-type="picture-card"
		    :on-remove="handleRemove"
			:before-upload="onBefore"
			:on-exceed="onExceed"
			:limit="1"
			:on-success="handleUploadSuccess"
		  >
		    <el-icon><Plus /></el-icon>
		</el-upload>
		<!-- <div ref="contentRef" :class="['flex', deviceDetection() ? 'flex-wrap' : '']">
			<PureTableBar :class="[isShow && !deviceDetection() ? '!w-[60vw]' : 'w-full']"
				style="transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1)" title="上传图片" :columns="columns"
				@refresh="onSearch">
				<template #buttons>
					<el-button type="primary" :icon="useRenderIcon(AddFill)" @click="openDialog()">
						添加信息
					</el-button>
				</template>
				<template v-slot="{ size, dynamicColumns }">
					<pure-table ref="tableRef" align-whole="center" showOverflowTooltip table-layout="auto"
						:loading="loading" :size="size" adaptive :adaptiveConfig="{ offsetBottom: 108 }"
						:data="dataList" :columns="dynamicColumns" :pagination="pagination"
						:paginationSmall="size === 'small' ? true : false" :header-cell-style="{
              background: 'var(--el-fill-color-light)',
              color: 'var(--el-text-color-primary)'
            }" @page-size-change="handleSizeChange" @page-current-change="handleCurrentChange">
						<template #operation="{ row }">
							<el-button class="reset-margin" link type="primary" :size="size"
								@click="openDialog('修改', row)">
								修改
							</el-button>
							<el-popconfirm :title="`是否确认删除?`" @confirm="handleDelete(row)">
								<template #reference>
									<el-button class="reset-margin" link type="primary" :size="size">
										删除
									</el-button>
								</template>
							</el-popconfirm>
						</template>
					</pure-table>
				</template>
			</PureTableBar>
		</div> -->
	</div>
</template>

<style scoped lang="scss">
	.main-content {
		margin: 10px 10px 0 !important;
	}
</style>